import { _decorator, Component, EventTouch, Layout, Node, UITransform, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

import EachCard from './EachCard';//挂在每个牌上

/**@ 滑动选择器- 锚点(0.5,0.5)
 * 该脚本挂在牌的父节点带有Layout上
 */
@ccclass('SliderSelector')
export default class SliderSelector extends Component {
    public SelectedCards: Node[] = [];//被选中且上升牌(准备要出的牌)++++++update
    private _start_pos_o: Vec3;//触控开启坐标
    private _select_start_n: number;//选择开始下标
    private _select_end_n: number;//选择结束下标
    private _card_move_n: number = 20;//牌上升高度

    onLoad () {
        this.node.on(Node.EventType.TOUCH_START, this._onTouchStart.bind(this));
        this.node.on(Node.EventType.TOUCH_MOVE, this._onTouchMove.bind(this));
        this.node.on(Node.EventType.TOUCH_END, this._onTouchEnd.bind(this));
        this.node.on(Node.EventType.TOUCH_CANCEL, this._onTouchCancel.bind(this));
    }

    /**更新牌状态 */
    private _updateCard(): void {
        // console.log("前this.SelectedCards: ", this.SelectedCards)
        let temp_o: EachCard;
        this.node.children.forEach(node_o=> {
            temp_o = node_o.getComponent(EachCard);
            if (temp_o.selected_b) {
                temp_o.rise_b = !temp_o.rise_b;//重置牌状态
                
                let y = temp_o.rise_b ? this._card_move_n : -this._card_move_n;//上升高度
                node_o.setPosition(node_o.getPosition().x, node_o.getPosition().y + y, node_o.getPosition().z);
            }
        });
        // console.log("后this.SelectedCards: ", this.SelectedCards)
    }

    /**检测点击节点 */
    private _checkTouchNode(pos_o_: Vec3): number {
        // console.log("_checkTouchNode.pos_o_ :", pos_o_)
        if (this.node.getComponent(Layout).horizontalDirection == Layout.HorizontalDirection.LEFT_TO_RIGHT) {
            let temp1_n = Math.abs(this.node.getComponent(Layout).spacingX);
            let temp2_n = this.node.children[0].getComponent(UITransform).width + this.node.getComponent(Layout).spacingX;
            let temp3_n = 0;

            for (let i = this.node.children.length - 1; i >= 0; --i) {
                temp1_n += temp2_n;
                // 判断是否在节点范围内
                if (pos_o_.x > (this.node.getComponent(UITransform).width * 0.5 - temp1_n) 
                    && pos_o_.x < (this.node.getComponent(UITransform).width * 0.5 - temp3_n)
                    && pos_o_.y > (this.node.children[i].position.y - this.node.children[i].getComponent(UITransform).height * 0.5) 
                    && pos_o_.y < (this.node.children[i].position.y + this.node.children[i].getComponent(UITransform).height * 0.5) ) {
                    // console.log("在 " + this.node.children[i].name + " 节点范围内");
                    return i;
                }
                temp3_n += temp3_n ? temp2_n : temp1_n;
            }
            return this._select_start_n ? this._select_end_n : null;//不在节点范围内，返回上次的选中节点下标
        }
    }

    /**清空选中节点 */
    private _clearSelected(): void {
        this.node.children.forEach(node_o=> {
            node_o.getComponent(EachCard).selected_b = false;
        });
    }

    /**触控开始 */
    private _onTouchStart(evt: EventTouch): void {
        const location = evt.getUILocation();
        // console.log("_onTouchStart.location :", location)
        
        this._start_pos_o = this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(location.x, location.y, 0));
        // console.log("开始坐标: " ,this._start_pos_o);
        this._select_start_n = this._checkTouchNode(this._start_pos_o);
        if (this._select_start_n === null) { return; }
        // 选中首次点击牌
        for (let i = 0; i < this.node.children.length; ++i) {
            if (i == this._select_start_n) {
                this.node.children[i].getComponent(EachCard).selected_b = true;
                break;
            }
        }
    }

    /**触控移动 */
    private _onTouchMove(evt: EventTouch): void {
        if (this._select_start_n === null) { return; }

        const location = evt.getUILocation();
        // console.log("_onTouchMove.location :", location)
        let local_pos_o = this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(location.x, location.y, 0));
        if (local_pos_o.x > -this.node.getComponent(UITransform).width * 0.5
            && local_pos_o.x < this.node.getComponent(UITransform).width * 0.5
            && local_pos_o.y > this.node.position.y
            && local_pos_o.y < this.node.getComponent(UITransform).height){

            this._select_end_n = this._checkTouchNode(local_pos_o);
            // 将 this._select_start_n - this._select_end_n 范围内节点设置为选中
            let mini_n: number;
            let max_n: number;
            if (this._select_start_n > this._select_end_n) {
                mini_n = this._select_end_n;
                max_n = this._select_start_n;
            } else {
                mini_n = this._select_start_n;
                max_n = this._select_end_n;
            }
            for (let i = 0; i < this.node.children.length; ++i) {
                this.node.children[i].getComponent(EachCard).selected_b = i >= mini_n && i <= max_n;
            }
        }
    }
    /**触控结束 */
    private _onTouchEnd(evt: EventTouch): void {
        this._updateCard();
        this._clearSelected();
        this._select_start_n = null;
    }
    /**触控返回 */
    private _onTouchCancel(evt: EventTouch): void {
        this._updateCard();
        this._clearSelected();
        this._select_start_n = null;
    }

}


